<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple D3</title>
    <script type="text/javascript" src="../resources/js/d3.js"></script>
</head>
<body>

<script type="text/javascript" >
    function SimpleWidget(spec){
        var instance = {};
        var headline, description;

        instance.render = function(){
            var div = d3.select("body").append("div");
            div.append("h3").text(headline);

            div.attr("class", "box")
                    .attr("style", "color:" + spec.color)
                    .append("p")
                    .text(description);
            return instance;
        };

        instance.headline = function(h){
            if(!arguments.length) h;
            headline = h;
            return instance;
        };

        instance.description = function(d){
            if(!arguments.length) d;
            description  = d;
            return instance;
        };

        return instance;
    }

    var widget = SimpleWidget({color: "#6495ed"})
            .headline("Simple Widget")
            .description("This is a simple widget demostrating function javascript.");
    widget.render();
</script>
</body>
</html>